<template>
  <div style="padding: 20px;"  v-loading="loading">
    <div style="display: flex; gap: 20px; width: 80%;">
      <!-- 左侧编辑器 -->
      <div style="flex: 1;">
        <ekEditor 
            v-model="formData.privacy_policy"
        />
      </div>
      
      <!-- 右侧小程序预览区域 -->
      <MiniProgramPreview 
        :content="formData.privacy_policy"
        pageTitle="隐私政策"
      />
    </div>

    <div class="flex flex-start" style="margin-left: 20px; margin-top: 20px">
      <el-button type="primary" @click="save()" :loading="saveLoading">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import { getToken } from '@/utils/sys';
import ekEditor from "@/components/form/ekEditor/index.vue";
import MiniProgramPreview from "@/components/business/miniProgramPreview/index.vue";

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox,$imageBaseUrl  } = globalProperties;

const saveLoading = ref(false);
const formData = ref({
  privacy_policy: ""
});
const loading = ref(false)
const init = () => {
    loading.value = true;
  $http
    .get(`business/config/getConfigByGroup?authCode=FUNCTION_CONFIG`,{ params:{code:'CONFIG_GROUP_PRIVACY_POLICY'}})
    .then((res) => {
      if (res.status === "success") {
       
        if(res.data.list?.length){
            for(let item of res.data.list){
                formData.value[item.config_key] =  item.config_value;
            }
        }
           loading.value = false;
      }
    });
};
const save = () => {
  $http
    .post(`business/config/save?authCode=FUNCTION_CONFIG&code=CONFIG_GROUP_PRIVACY_POLICY`, {
      ...formData.value,
    })
    .then((res) => {
        if(res.status =='success'){
          $ekMessage.success('操作成功');

        }
    });
};


onMounted(async () => {
  init();
});
</script>
